<script lang="ts" setup>
  import type { Game } from '@/types/game';
  import { createGame, publishGame, updateGame } from '@/api/game';
  import { onMounted, ref } from 'vue';
  import { Form, Message } from '@arco-design/web-vue';
  import { cloneDeep } from 'lodash';
  import dayjs from 'dayjs';

  const props = defineProps<{
    stageGame: Game;
    game?: Game;
  }>();

  const emit = defineEmits(['close']);

  const data = ref<Partial<Game>>({});
  onMounted(() => {
    if (props.game) {
      data.value = cloneDeep(props.game);
    } else {
      data.value = cloneDeep(props.stageGame);
      data.value.name = '';
    }
    data.value.signRange = [
      dayjs(data.value.signStartDate).format('YYYY-MM-DD HH:mm:ss'),
      dayjs(data.value.signEndDate).format('YYYY-MM-DD HH:mm:ss'),
    ];
    data.value.id = undefined;
    data.value.parentId = props.stageGame.id;
    data.value.childGameCount = 1;
    data.value.gameType = 2;
    data.value.parentId = props.stageGame.id;
    data.value.approveState = 1;
    delete data.value.gameProductGroupVOS;
  });
  const formRef = ref<InstanceType<typeof Form> | null>(null);
  const saving = ref(false);
  const handleSubmit = async () => {
    try {
      if (formRef.value) {
        const validate = await formRef.value.validate();
        if (!validate) {
          [data.value.startDate, data.value.endDate] = data.value
            .range as string[];
          data.value.startDate = dayjs(data.value.startDate).format(
            'YYYY-MM-DD 00:00:00'
          );
          data.value.endDate = dayjs(data.value.endDate).format(
            'YYYY-MM-DD 23:59:59'
          );
          const gameStartDate = dayjs(data.value.startDate);
          const signEndDate = dayjs(data.value.signEndDate);
          if (!signEndDate.isBefore(gameStartDate)) {
            Message.error('比赛时间要晚于报名时间');
            return;
          }

          if (props.game?.id) {
            const gameRes = await updateGame(data.value);
            await publishGame(gameRes.data.data.id);
          } else {
            const gameRes = await createGame(data.value);
            await publishGame(gameRes.data.data.id);
          }
          Message.success('操作成功');
          emit('close', true);
        }
      }
    } finally {
      saving.value = false;
    }
  };
</script>

<template>
  <a-modal
    :title="game ? '修改比赛阶段' : '创建比赛阶段'"
    :width="500"
    visible
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <a-form ref="formRef" :model="data" layout="vertical">
      <a-form-item
        label="阶段"
        field="name"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-input v-model="data.name" />
      </a-form-item>
      <a-form-item
        label="报名时间"
        field="signRange"
        disabled
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-range-picker
          v-model="data.signRange"
          show-time
          style="width: 400px"
        />
      </a-form-item>
      <a-form-item
        label="赛事日期"
        field="range"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-range-picker v-model="data.range" style="width: 400px" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
